<template>
  <div class="container">
    <el-page-header @back="goBack" content="收货单"></el-page-header>
    <div class="e-m-t-45 flex" style="justify-content: space-between">
      <div class="e-flex-1">
        <el-button @click="downloadwithdrawa()" style="margin-bottom:30px; margin-top: 1px;" type="primary" plain><i
            class="iconfont icon-excel"></i>导出Excel</el-button>
        <!-- <el-button type="primary" icon="el-icon-plus" plain @click="create">新建出库单</el-button> -->
      </div>
      <div class="flex">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input placeholder="请输入手机号,姓名,订单号,车牌,打包站,站点和站点手机" v-model="key" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="打包站筛选">
            <el-select v-model="packStationId" clearable placeholder="请选择" @change="getList">
              <el-option v-for="item in stlist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="type-state e-m-b-30">
      <span v-for="(item, index) in statusArr" :key="index" :class="{ 'on': state == item.value }"
        @click="state = item.value">{{ item.name }}</span>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column fixed prop="number" label="订单ID">
      </el-table-column>
      <el-table-column fixed prop="storenames" label="出库站点" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.storenames.slice(1) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="packstationname" label="接收打包站" width="200">
      </el-table-column>
      <!-- <el-table-column prop="typenames" label="回收品类" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.typenames ? scope.row.typenames : '--' }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="weight" label="重量（KG）" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.weight }}</span>
          <span>(差额：{{ scope.row.weightdifference }})</span>
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量（件）" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.quantity }}</span>
          <span>(差额：{{ scope.row.quantitydifference }})</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="price" label="单价（元/KG(件)）" width="140">
      </el-table-column> -->
      <el-table-column prop="amount" label="总额（元）" width="100">
      </el-table-column>
      <el-table-column prop="createddatetime" label="建单时间" width="180">
      </el-table-column>
      <el-table-column prop="state" label="订单状态" width="100">
        <template slot-scope="scope">
          <span class="color-success" v-if="scope.row.state == '已完结'">{{ scope.row.state }}</span>
          <span class="color-danger" v-else-if="scope.row.state == '已撤销'">{{ scope.row.state }}</span>
          <span class="color-warning" v-else>{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="examinestate" label="审核状态" width="100">
        <template slot-scope="scope">
          <span class="color-success" v-if="scope.row.examinestate == '已审核'">{{ scope.row.examinestate }}</span>
          <span class="color-danger" v-else-if="scope.row.examinestate == '未审核'">{{ scope.row.examinestate }}</span>
          <span class="color-warning" v-else>{{ scope.row.examinestate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <nuxt-link class="e-font-12 color-main el-button el-button--text el-button--small" :to="goView(scope.row.id)">查看</nuxt-link>
          <!-- <el-button v-if="scope.row.state != '已完结' && scope.row.state != '已撤销'" @click="showCancel(scope.row.id)" type="text" size="small">取消</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination" v-if="tableData.length > 0">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize" :current-page="pageIndex" @current-change="pageChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- 取消理由 -->
    <el-dialog title="取消订单" :visible.sync="showcancel" width="30%">
      <el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showcancel = false">取消</el-button>
        <el-button type="primary" @click="cancelOrderSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  layout: 'admin',
  head() {
    return {
      title: '收货单' 
    }
  },
  data() {
    return {
      timeType: 0,//时间类型
      packStationId: null,
      stlist: '',//打包下拉
      value1: "",//下单时间
      starteate: "",//下单初始
      endDate: "",//下单结束
      loading: true,
      statusArr: [
        {
          name: '全部',
          value: null
        },
        {
          name: '已出库',
          value: 1
        },
        {
          name: '已完结',
          value: 2
        },
        {
          name: '已撤销',
          value: 3
        }
      ],
      state: null,
      key: '',
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      options: [{
        value: null,
        label: '全部'
      }, {
        value: 0,
        label: '待出库'
      },
      {
        value: 1,
        label: '已装车'
      }, {
        value: 2,
        label: '已出库'
      }, {
        value: 3,
        label: '已完结'
      },
      {
        value: 4,
        label: '已取消'
      }
      ],
      param: {},
      cancelId: 0,
      showcancel: false,
      textarea: ''
    }
  },
  mounted() {
    this.stationlist()
    for (let k in this.$route.query) {
      if (this.$route.query[k]) {
        if (k == 'pageIndex' || k == 'pageSize' || k == 'packStationId') {
          this[k] = parseInt(this.$route.query[k])
        } else if (k == 'startDate' || k == 'endDate') {
          this[k] = this.$route.query[k]
          this.value1 = [this.$route.query['startDate'], this.$route.query['endDate']]
        } else {
          this[k] = this.$route.query[k]
        }
      }
    }
    this.getList()
  },
  watch: {
    state(value) {
      this.pageIndex = 1
      this.getList()
    }
  },
  methods: {
    downloadwithdrawa() {
      this.$axios.post('/PackStation/InOrder/Download', {
        "request": {
          "pageIndex": this.pageIndex,
          "pageSize": 0,
          "offset": 0,
          "key": "",
          "timeType": 1,
          "startDate": this.startDate,
          "endDate": this.endDate,
          "state": this.state,
          "packId": this.packStationId,
          "timeType": this.timeType
        },
        "fields": [
          {
            "e": "Number",
            "c": "订单编号"
          },
          {
            "e": "storenames",
            "c": "出库站点"
          },
          {
            "e": "packstationname",
            "c": "接收打包站"
          },
          {
            "e": "brothername",
            "c": "运送小哥"
          },
          {
            "e": "weight",
            "c": "重量（KG）"
          },
          {
            "e": "weightdifference",
            "c": "重量差额（KG）"
          },
          {
            "e": "quantity",
            "c": "数量（件）"
          },
          {
            "e": "quantitydifference",
            "c": "数量差额（件）"
          },
          {
            "e": "quantitydifference",
            "c": "数量差额（件）"
          },
          {
            "e": "amount",
            "c": "总额（元）"
          },
          {
          	"e": "state",
          	"c": "订单状态"
          }
        ]

      }, {
        responseType: 'blob'
      }).then(res => {
        console.log(res)
        let content = res;
        let fileName = '打包站收货单.xls'
        this.utils.saveAndExport(content, fileName)
      })
    },
    stationlist() {
      return this.$axios.post('/select/packstationlist', {
        "PageIndex": 1,
        "PageSize": 999,
      }).then(res => {
        this.stlist = res.rows
      })
    },
    time(e) {
      if (e && e.length > 0) {
        this.startDate = e[0]
        this.endDate = e[1]
        this.timeType = 4
        this.getList()
      } else {
        this.timeType = 0
        this.startDate = ''
        this.endDate = ''
        this.getList()
      }
    },
    clearstate(v) {
      this.getList();
    },
    goBack() {
      this.$router.go(-1)
    },
    create() {
      this.$router.push({
        path: '/order/store/create'
      })
    },
    getList() {
      this.tableData = []
      this.loading = true
      this.param = {
        "pageIndex": this.pageIndex,
        "pageSize": this.pageSize,
        "key": this.key,
        "state": this.state,
        "startDate": this.startDate,
        "endDate": this.endDate,
        "packId": this.packStationId,
        "timeType": this.timeType
      }
      return this.$axios.post('/PackStation/InOrder/List', this.param).then((res) => {
        this.loading = false
        this.tableData = res.rows;
        this.total = res.total;
      }).catch((err) => {
        this.loading = false
      })
    },
    goView(id) {
      let param = []
      for (let k in this.param) {
        if (this.param[k]) {
          param.push(`${k}=${this.param[k]}`)
        }
      }
      // this.$router.push(`/order/store/list?${param.join('&')}`)

      return '/order/take/Views?id=' + id
    },
    pageChange(e) { // 页码切换事件
      this.pageIndex = e;
      this.getList()
      // this.$router.push(`/order/store/list?p=${this.pageIndex}`)
    },
    handleSizeChange(val) {
      this.pageIndex = 1;
      this.pageSize = val;
      this.getList()
    },
    showCancel(id){
      this.cancelId = id
      this.showcancel = true
    },
    cancelOrderSubmit() {
			this.$axios.post('/PackStation/InOrder/Cancel', {
				id: this.cancelId,
				reason: this.textarea,
			}).then((res) => {
				this.$message({
					type: 'success',
					message: res.msg
				});
				this.showcancel = false;
				this.textarea = "";
        this.getList()
			})
		}
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  padding: 20px 0 0;
}

.send {
  margin-top: 15px;
  margin-right: 10px;
}

.dialogForm {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    float: left;

    &.all {
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }
}

.user-face {
  display: flex;
  align-items: center;
  position: relative;

  .male,
  .female {
    font-size: 14px;
    position: absolute;
    left: 30px;
    top: 0;
    background-color: #fff;
    height: 16px;
    width: 16px;
    line-height: 16px;
    border-radius: 6px;
  }

  .male {
    color: var(--blue);
  }

  .female {
    color: var(--pink);
  }
}
</style>
